<template>
	<view class="chart-cont">
		<l-echart class="chart" ref="chartRef" :customStyle="customStyle"></l-echart>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
	const echarts = require('../../../uni_modules/lime-echart/static/echarts.min');
	const { proxy } = getCurrentInstance();
	const props = defineProps({
		chartData: Array,
	});

	uni.$on('stat-data-initChart', () => {
		initChart()
	})

	const chartRef = ref(null);
	const myChart = ref(null);
	const xData = ref([]);
	const yData = ref([]);
	const customStyle = ref({
		height: "300px"
	});
	const option = reactive({
		legend: {
			type: 'scroll',
			show: true,
			top: 10,
			left: "center",
			itemWidth: 10,
			itemHeight: 5,
			data: []
		},
		graphic: {
			type: 'text',
			left: 'center',
			top: 'middle',
			invisible: true,
			style: {
				text: '暂无数据',
				fontSize: 16,
				fill: '#999'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
			confine: true
		},
		grid: {
			top: "20%",
			left: 20,
			right: 20,
			bottom: 20,
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				splitNumber: 3,
				axisTick: {
					show: false,

				},
				axisLine: {
					lineStyle: {
						color: "#e1e1e1"
					}
				},
				axisLabel: {
					color: "#999"
				},
				splitLine: {
					lineStyle: {
						color: "#e1e1e1"
					}
				},
				data: xData.value,
			}
		],
		yAxis:
			{
				type: 'value',
				axisLabel: {
					color: "#999"
				},
			}
		,
		series: [

		]
	});

	onMounted(() => {
		// 组件能被调用必须是组件的节点已经被渲染到页面上
		// setTimeout(() => {
		// 	initChart()
		// }, 1000)
	});

	const colors = ref([
		'#1DE8E0', '#BCCAFA', '#D2D2D2', '#FFBB73', '#86D06A'
	]);

	async function initChart() {
		xData.value = [];
		yData.value = [];
		// console.log("props.chartData", props.chartData)
		option.series = [];
		option.xAxis[0].data = []
		option.legend.data = []
		if (props.chartData.length) {
			let legend = [];
			let time = [];

			for (var index = 0; index < props.chartData.length; index++) {
				let ydata = [];
				legend.push(props.chartData[index].name)
				props.chartData[index].datas.forEach(item => {
					if (index == 0) {
						time.push(proxy.dayjs(item[0]).format('YYYY-MM-DD HH:mm:ss'))
					}
					ydata.push(item[1])
				})
				option.series[index] = {
					name: props.chartData[index].name,
					type: 'line',
					smooth: false,
					showSymbol: false,
					itemStyle: {
						color: colors.value[index % 5]
					},
					lineStyle: {
						color: colors.value[index % 5]
					},
					tooltip: {
						valueFormatter: function (value) {
							return value;
						}
					},
					data: ydata,
				};
				// console.log("option.series[index].data", option.series[index].data)
				// console.log("option.series", option.series)
				// props.chartData.length
				option.xAxis[0].data = time;
				option.legend.data = legend;
				option.graphic.invisible = time.length > 0;
				// console.log("option.legend.data ", option.legend.data)
			}

		} else {
			option.graphic.invisible = false;
		}
		if (!chartRef.value) return
		const chart = await chartRef.value.init(echarts)
		chart.setOption(option)
		myChart.value = chart
	}
</script>
<style lang="scss" scoped>
	.chart-cont {
		position: relative;
		width: 100%;
		height: 100%;

		.chart {
			width: 100%;
			height: 100% !important;
		}
	}
</style>